<template>
    <el-drawer v-model="drawerShow" :before-close="close" :with-header="false" size="40%">
    <div class="record-container">
      <span style="font-weight: 700;font-size: 15px;">
          <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>
          <span>还箱单信息</span>
          <!-- <span v-if="returnInfo.returnBoxType == 5">还箱单详情</span>
          <span v-if="returnInfo.returnBoxType == 10">箱属详情</span>
          <span v-if="returnInfo.returnBoxType == 15">还箱令详情</span> -->
        </span>
        <div>
          <el-row class="marginTop10">
            <el-col :span="5" class="text-right">租箱企业：</el-col>
            <el-col :span="19">{{ returnInfo.agentName }}</el-col>
          </el-row>
          <el-row class="marginTop10">
            <el-col :span="5" class="text-right">还箱单号：</el-col>
            <el-col :span="19">{{ returnInfo.returnBoxNo }}</el-col>
          </el-row>
          <el-row class="marginTop10">
            <el-col :span="5" class="text-right">租箱订单：</el-col>
            <el-col :offset="5" :span="19">
              <el-table :data="rentOrderList">
                <el-table-column prop="orderNo" label="订单号" align="center"/>
                <el-table-column label="联系人" align="center">{{ returnInfo.agentUserName }}</el-table-column>
                <el-table-column label="联系电话" align="center">
                  <template #default="scope">
                    <span v-if="scope.row.agentUserAreaCode">+{{ scope.row.agentUserAreaCode }} </span>
                    {{ scope.row.agentUserTel }}
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row class="marginTop10" v-if="returnInfo.instruction">
            <el-col :span="5" class="text-right">还箱指令号：</el-col>
            <el-col :span="19">{{ returnInfo.instruction }}</el-col>
          </el-row>
          <el-row class="marginTop10" v-if="returnInfo.returnValidityPeriodStart">
            <el-col :span="5" class="text-right">还箱单有效范围：</el-col>
            <el-col :span="19">
              {{ formatDate(returnInfo.returnValidityPeriodStart, 2) }}
              ~
              {{ formatDate(returnInfo.returnValidityPeriodEnd, 2) }}
              <el-tooltip :content="content" effect="dark" placement="top">
              <el-icon class="el-icon--right">
                <QuestionFilled />
              </el-icon>
          </el-tooltip>

            </el-col>
          </el-row>
          <el-row class="marginTop10">
            <el-col :span="5" class="text-right">箱型量：</el-col>
            <el-col :span="19">{{boxTypeFilter(returnInfo.boxType)}}*{{returnInfo.totalReturnQuantity}}</el-col>
          </el-row>
          <el-row class="marginTop10">
            <el-col :span="5" class="text-right">箱号：</el-col>
            <el-col :span="19">
              <el-row >
                <template v-for="(item,index) in  containerNoInfo" :key="index">
                  <el-col :span="6" style="border:1px solid #ccc;" class="text-center">{{item.containerNo}}</el-col>
                </template>  
              </el-row>
            </el-col>        
          </el-row>
          <el-row class="marginTop10"  v-if="returnInfo.returnBoxType == 10">
            <el-col :span="5" class="text-right">箱属内容：</el-col>
            <el-col :span="19">{{returnInfo.boxOwnerContent || '--'}}</el-col>
          </el-row>
          <yardInfoCard :yard="returnInfo"></yardInfoCard>
        </div>
        <el-button @click="listTap" type="primary" style="margin-top: 50px;text-align: right;">
          <span>还箱记录</span>
        </el-button>
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils'
import { onActivated, ref,nextTick } from 'vue'
import yardInfoCard from '@/views/components/boxYard/yardInfo.vue'
import { getReturnData } from '@/api/orderManage/returnBox'

const openBox = (id) => {
  detaiInfo(id)
}
//查看还箱单详情
const drawerShow=ref(false)
const content=ref('从货代公司收到还箱单之日起，以天为单位计算有效期，不足一天按一天计算。')
const returnInfo = ref({})
const rentOrderList = ref([])
const containerNoInfo = ref([])
const detaiInfo = (row: any) => {
  getReturnData(row).then((res: any) => {
    drawerShow.value=true
    returnInfo.value = res.data
    rentOrderList.value = JSON.parse(res.data.orderList)
    containerNoInfo.value = JSON.parse(res.data.containerNoList) || []
  })
};
const emits = defineEmits(['huanxiangdanInfoClick','huanxiangdanInfoListClick' ])
//关闭
const close=()=>{
  emits('huanxiangdanInfoClick', returnInfo.value);
  drawerShow.value=false
}
const listTap=()=>{
  emits('huanxiangdanInfoListClick', returnInfo.value);
}
//过滤
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
defineExpose({
    openBox
})
</script>
<style lang="scss" scoped>
</style>
